<template>
  <md-popup id="contacts-selector" v-model="value" position="bottom" :has-mask="false" prevent-scroll @hide="cancel">
    <md-popup-title-bar class="title-bar" title="代人叫车" ok-text="确认" cancel-text="取消" @confirm="confirm" @cancel="cancel"></md-popup-title-bar>
    <div class="container">
      <div class="field_box">
        <md-field class="contact-history">
          <md-input-item
            name="contactName"
            v-model="contactName"
            class="no-right-padding"
            ref="nameInput"
            placeholder="请输入联系人姓名"
            data-vv-name="联系人姓名"
            maxlength="10"
            v-validate="'required'"
          >
            <md-icon class="place_icon" name="drjc_contacts" slot="left"></md-icon>
          </md-input-item>
          <md-input-item
            name="contactPhone"
            v-model="contactPhone"
            class="no-right-padding"
            ref="phoneInput"
            placeholder="请输入联系人手机号"
            data-vv-name="联系人手机号码"
            v-validate="'required|phone'"
          >
            <md-icon class="place_icon" name="drjc_telephone" slot="left"></md-icon>
          </md-input-item>
        </md-field>
      </div>
      <div class="field_box" v-if="getDairenContacts.length>0">
        <md-field title="历史记录" class="contact-history">
          <md-field-item :title="item.name + ' ' + item.phone" v-for="(item,index) in getDairenContacts" :key="index" @click="selectContact(item)"></md-field-item>
          <md-field-item align="center" @click="clearHistory" class="clear-btn">清除历史记录</md-field-item>
        </md-field>
      </div>
    </div>
  </md-popup>
</template>

<script>
import '@/assets/svgs/drjc_contacts.svg';
import '@/assets/svgs/drjc_telephone.svg';
import { Popup, PopupTitleBar, Field, FieldItem, Icon, InputItem, Dialog } from 'mand-mobile';
import { mapGetters } from 'vuex';
import { SET_DAIREN_CONTACT, CLEAR_DAIREN_CONTACTS } from '@/store/mutations.types';
export default {
  name: 'contacts-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Icon.name]: Icon,
    [InputItem.name]: InputItem
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    }
  },
  data() {
    return {
      contactName: '',
      contactPhone: ''
    };
  },
  methods: {
    confirm() {
      this.$validator.validateAll().then(res => {
        if (!res) {
          Dialog.alert({
            title: '错误',
            content: this.errors.all()[0],
            confirmText: '确定'
          });
        } else {
          let contact = {
            name: this.contactName,
            phone: this.contactPhone
          };
          this.$store.commit(SET_DAIREN_CONTACT, contact);
          this.value = false;
          this.$emit('submit');
        }
      });
    },
    cancel() {
      this.value = false;
      this.$emit('cancel');
    },
    selectContact(contact) {
      this.$store.commit(SET_DAIREN_CONTACT, contact);
      this.value = false;
      this.$emit('submit');
    },
    clearHistory() {
      this.$store.commit(CLEAR_DAIREN_CONTACTS);
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  },
  computed: {
    ...mapGetters(['getDairenContacts', 'getSelectedContact'])
  }
};
</script>

<style lang="stylus">
#contacts-selector {
  .title-bar {
    height: 88px;
  }

  .container {
    background-color: color-primary-background;
    height: calc(100vh - 88px);
    font-size: 22px;
    padding: 20px;

    .field_box {
      background-color: #fff;
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
      border-radius: 10px;
      padding: 5px;
      margin-bottom: 22px;

      .no-right-padding {
        padding-right: 0px !important;
      }

      .field_item {
        height: 88px;
        font-size: 28px;
      }

      .place_icon {
        width: 20px;
        height: 20px;
      }

      .contact-history {
        .md-field-title {
          font-size: 28px;
        }

        .md-field-item-title {
          font-size: 26px;
          color: color-text-minor;
        }

        .clear-btn {
          .md-field-item-content {
            font-size: 22px;
            color: #888888;
          }
        }
      }
    }
  }
}
</style>
